<template>
  <a-spin style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingBottom: '8px' }">
      <template #title>
        人口变化情况
      </template>
        <div id="main2" style="width: 100%; height: 380px"  />
    </a-card>
  </a-spin>
</template>

<script  setup>
import * as echarts from 'echarts';
import {ref} from "vue";
import {getPChange} from "@/api/grid/visualization";


function initEcharts (xAxisData,seriesData) {
  const chartDom = document.getElementById('main2');
  const myChart = echarts.init(chartDom);
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: seriesData,
        type: 'line',
        smooth: true
      }
    ]
  };

  option && myChart.setOption(option);
}

const businessProportion = ref([])
const getBusinessProportion = async () => {
  const {code, data} = await getPChange()
  if (code === 200) {
    let xAxisData = []
    let seriesData = []
    data.forEach((item, index) => {
      xAxisData.push(item.name)
      seriesData.push(item.value)
    })
    initEcharts(xAxisData,seriesData)
  }
}
getBusinessProportion()
</script>

<style scoped lang="less"></style>
